<script setup lang="ts">
  import { ref, watch, defineEmits } from 'vue';
  import TopInput from './components/top-input.vue';
  import TopTable from './components/top-table.vue';

  const emit = defineEmits(['updateTableData']);

  const typeOptions = [
    // {
    //   label: '呼叫空料车到提升机',
    //   value: '0',
    // },
    {
      label: 'AGV拉料车到101缓存区',
      value: '1',
    },
    {
      label: '料车挂母车',
      value: '2',
    },
    {
      label: '牵引车到线边牵引车缓存库',
      value: '3',
    },
    {
      label: '牵引车到线边卸货区',
      value: '4',
    },
    {
      label: 'AGV搭载料车入线边料车缓存库',
      value: '5',
    },
    {
      label: 'AGV搭载料车入线边库',
      value: '6',
    },
    {
      label: '牵引车回库',
      value: '7',
    },
    {
      label: '料车回库',
      value: '8',
    },
    {
      label: '呼叫空料车到提升机装车缓存位',
      value: '9',
    },
    {
      label: '搭载料车到提升机卸货区',
      value: '10',
    },
    {
      label: '回料车空车区域',
      value: '11',
    },
    {
      label: '搭载料车到提升机卸货缓存区',
      value: '12',
    },
    {
      label: '搭载料车从卸车缓存位到提升机卸货区',
      value: '13',
    },
  ];

  const tableData = ref('');
  watch(
    tableData,
    () => {
      emit('updateTableData', tableData.value);
    },
    { deep: true }
  );
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">调度任务</div>
      </template>
      <div class="content">
        <TopInput
          @updateArray="tableData = $event"
          :typeOptions="typeOptions"
        />
        <a-divider />
        <TopTable :table-data="tableData" :typeOptions="typeOptions" />
      </div>
    </a-card>
  </div>
</template>

<style scoped>
  .flow-query {
    margin: 0px;
    padding: 10px;
    height: 100%;
  }
  .card-title {
    font-size: 24px;
  }
  .content {
    display: flex;
    flex-direction: column;
  }
</style>
